<template>
  <el-container class="bg-white rounded" :style="{ height: h + 'px' }">
    <el-header class="image-header">
      <el-button type="primary" size="default" @click="handleOpenCreate">新增图片分类</el-button>
      <el-button type="warning" size="default" @click="uploadFile">上传图片</el-button>
      {{ $filters.dateFilter(ts) }}
    </el-header>
    <el-container>
      <image-aside ref="imageAsideRef" @onClickListItem='onClickListItem'></image-aside>
      <image-main ref='imageMainRef'></image-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from "vue";
import ImageAside from "~/components/ImageAside.vue";
import ImageMain from "~/components/ImageMain.vue";
import { useToast } from "vue-toastification";
const toast = useToast();

const imageAsideRef = ref(null);
const imageMainRef = ref(null);
const windowHeight = window.innerHeight || document.body.clientHeight;
const h = windowHeight - 64 - 44 - 40; // 本组件充满主体区域应该设置的高度
const ts = ref(1433088000000)
// 1433088000000

const handleOpenCreate = () => imageAsideRef.value.handleCreate();
// item - 选中的列表的对象，数据模型：{id: 1, name: '运动旅游', images_count: 13, order: 1001}
// index - 选中对象的序号
const onClickListItem = (item, index) => {
  // imageMainRef.value.getListByCategory('image组件中监听到 list 点击事件又调用了 imageMain 的方法');
  // console.log(`image/list.vue#onClickListItem.index:${index}`)
  imageMainRef.value.loadData(item.id)// 点击分类 item 后刷新右边的图片列表
}

const uploadFile = () => imageMainRef.value.openUploadDrawer()
</script>
<style scoped>
.image-header {
  border-bottom: 1px solid #eee;
  @apply flex items-center;
}
</style>
